<template>
  <div class="left">
    <h2>Left组件</h2>
    <Article></Article>
  </div>
</template>

<script>
export default {
  beforeCreate() {
    console.log('Left 组件即将初始化data数据')
  },

  created() {
    console.log('Left 组件的data数据已经初始化完毕')
  },

  beforeMount() {
    console.log('Left 组件中页面即将被渲染')
  },

  mounted() {
    console.log('Left 组件页面已经渲染完毕')
  },

  // beforeDestroy
  beforeDestroy() {
    console.log('Left 组件即将被移除')
  },

  // 组件被移除后，触发
  destroyed() {
    console.log('Left 组件已经被移除完毕')
  }
}
</script>

<style lang="less" scoped>
.left {
  background-color: darkorange;
}
</style>
